<template>
  <view class="item-list-container">
    <!-- 项目列表 -->
    <view 
      v-for="(item, index) in items" 
      :key="index" 
      class="item-card"
    >
      <view class="item-header">
        <text class="item-title">{{ itemTitle }} {{ index + 1 }}</text>
        <nut-button 
          type="danger" 
          size="small" 
          @click="handleRemove(index)"
          class="delete-btn"
        >
          删除
        </nut-button>
      </view>
      
      <slot :item="item" :index="index" :update="handleUpdate" />
    </view>
    
    <!-- 添加按钮 -->
    <view 
      class="add-button" 
      @click="handleAdd"
    >
      <IconFont name="plus" size="20" :color="addButtonColor" />
      <text class="add-button-text" :style="{ color: addButtonColor }">{{ addButtonText }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro'

interface Props {
  items: any[]
  itemTitle: string
  minItems?: number
  addButtonText: string
  addButtonColor?: string
}

interface Emits {
  (e: 'add'): void
  (e: 'remove', index: number): void
  (e: 'update', index: number, data: any): void
}

withDefaults(defineProps<Props>(), {
  minItems: 1,
  addButtonColor: '#00b26a'
})

const emit = defineEmits<Emits>()

const handleAdd = () => {
  emit('add')
}

const handleRemove = (index: number) => {
  emit('remove', index)
}

const handleUpdate = (index: number, data: any) => {
  emit('update', index, data)
}
</script>

<style scoped lang="scss">
// 手机端优化样式
.item-list-container {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.item-card {
  border: 1px solid #e5e7eb;
  border-radius: 12rpx;
  padding: 16rpx;
  margin-bottom: 12rpx;
}

.item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}

.item-title {
  font-size: 26rpx;
  font-weight: 500;
  color: #374151;
}

.add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  border-radius: 12rpx;
  border: 2px dashed #86efac;
  transition: background-color 0.2s ease;
  
  &:active {
    background-color: #f0fdf4;
  }
}

.add-button-text {
  font-size: 26rpx;
  margin-left: 8rpx;
}

.delete-btn {
  :deep(.nut-button) {
    padding: 8rpx 16rpx;
    font-size: 24rpx;
    border-radius: 8rpx;
  }
}

// 响应式设计
@media (max-width: 750rpx) {
  .item-list-container {
    gap: 12rpx;
  }
  
  .item-card {
    margin-bottom: 12rpx;
  }
  
  .item-title {
    font-size: 24rpx;
  }
  
  .add-button-text {
    font-size: 24rpx;
  }
  
  .delete-btn :deep(.nut-button) {
    padding: 6rpx 12rpx;
    font-size: 22rpx;
  }
}
</style>
